<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <h2>成绩管理系统</h2>
        <p>请选择角色并登录</p>
      </div>

      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        label-width="0"
        size="large"
      >
        <!-- 角色选择 -->
        <el-form-item prop="role">
          <el-select
            v-model="loginForm.role"
            placeholder="请选择登录角色"
            size="large"
            style="width: 100%"
          >
            <el-option
              :value="0"
              label="学生"
            >
              <div class="role-option">
                <el-icon><User /></el-icon>
                <span>学生</span>
              </div>
            </el-option>
            <el-option
              :value="1"
              label="普通管理员"
            >
              <div class="role-option">
                <el-icon><UserFilled /></el-icon>
                <span>普通管理员</span>
              </div>
            </el-option>
            <el-option
              :value="2"
              label="超级管理员"
            >
              <div class="role-option">
                <el-icon><Avatar /></el-icon>
                <span>超级管理员</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 用户名输入 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            :placeholder="usernamePlaceholder"
            size="large"
            clearable
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            show-password
            clearable
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="handleLogin"
            class="login-btn"
          >
            登录
          </el-button>
        </el-form-item>

        <!-- 注册链接 -->
        <el-form-item>
          <el-button
            type="text"
            @click="goToRegister"
            class="register-link"
          >
            还没有账号？立即注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, UserFilled, Avatar, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'

// 路由
const router = useRouter()

// 用户状态管理
const userStore = useUserStore()

// 表单引用
const loginFormRef = ref()

// 加载状态
const loading = ref(false)

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  role: null // 默认不选择，让用户主动选择角色
})

// 根据角色动态显示用户名输入框提示
const usernamePlaceholder = computed(() => {
  switch (loginForm.role) {
    case 0:
      return '请输入学号'
    case 1:
    case 2:
      return '请输入用户名'
    default:
      return '请输入用户名'
  }
})

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择登录角色', trigger: 'change' }
  ]
}

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()

    loading.value = true

    const loginData = {
      username: loginForm.username,
      password: loginForm.password,
      role: loginForm.role
    }

    await userStore.login(loginData)

    // 登录成功后跳转到首页
    ElMessage.success('登录成功！')

    setTimeout(() => {
      router.push('/dashboard')
    }, 1000)

  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/img/login-bg.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 20px;
  position: relative;

  // 添加半透明遮罩层以确保内容可读性
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(64, 158, 255, 0.05);
    z-index: 1;
  }
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

.login-header {
  text-align: center;
  padding: 40px 30px 20px;
  background: linear-gradient(135deg, #409eff 0%, #79bbff 100%);
  color: white;

  h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 600;
  }

  p {
    margin: 0;
    opacity: 0.9;
    font-size: 14px;
  }
}

.login-form {
  padding: 30px;

  .role-option {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-icon {
      font-size: 16px;
      color: #409eff;
    }
  }

  :deep(.el-input) {
    margin-bottom: 20px;

    .el-input__wrapper {
      border-radius: 8px;
      box-shadow: 0 0 0 1px #dcdfe6 inset;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 0 0 1px #c0c4cc inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }

    .el-input__prefix {
      color: #909399;
    }
  }

  :deep(.el-select) {
    margin-bottom: 20px;

    .el-input__wrapper {
      border-radius: 8px;
    }
  }

  .login-btn {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .register-link {
    width: 100%;
    color: #666;
    font-size: 14px;

    &:hover {
      color: #409eff;
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .login-container {
    padding: 10px;
    background-attachment: scroll; // 移动端使用scroll避免性能问题
  }

  .login-card {
    max-width: 100%;
  }

  .login-header {
    padding: 30px 20px 15px;

    h2 {
      font-size: 24px;
    }
  }

  .login-form {
    padding: 20px;
  }
}
</style>